import React, { useEffect, useState } from 'react';
import {
  Form,
  Input,
  Select,
  Button,
  Card,
  Space,
  Typography,
  Divider,
  Pagination,
  Tag,
  Row,
  Col,
  message,
  Popconfirm,
} from 'antd';
import { SearchOutlined, PlusOutlined, MessageOutlined } from '@ant-design/icons';
import { page } from '@/services/apis/serviceProviderRegister';
import { useModel } from '@umijs/max';

const { Title, Text } = Typography;

const statusEnum:any = {
  draft: "草稿",
  pending: "待审核",
  approved: "已审核",
  rejected: "已拒绝"
}

const ProductListPage: React.FC = () => {
  const [form] = Form.useForm();
  const [productData, setProductData] = useState<any[]>([]);
  const { initialState, setInitialState } = useModel('@@initialState');
  const [pagination, setPagination] = useState<{ current: number, pageSize: number, total: number }>({
    current: 1,
    pageSize: 10,
    total: 0
  })

  const searchFunction = (values: any) => {
    page({...values,supplierId:initialState?.currentUser.data.id}).then(res => {
      const { code, data } = res;
      if (code == 0) {
        // //message.success("查询成功")
        setProductData(data.records || [])
        setPagination({
          current: data.current,
          pageSize: data.size,
          total: data.total
        })
      }
    })
  }

  useEffect(() => {
    searchFunction({ current: pagination.current, pageSize: pagination.pageSize })
  }, [])

  const handleSearch = (values: any) => {
    searchFunction({ ...values, current: pagination.current, pageSize: pagination.pageSize })
    console.log('搜索参数：', values);
  };

  const handleReset = () => {
    form.resetFields();
    searchFunction({ current: pagination.current, pageSize: pagination.pageSize })
  };

  const handleAdd = () => {
    console.log('新增产品');
  };

  const handleFeedback = () => {
    console.log('问题反馈');
  };

  const handlePreview = (record: any) => {
    console.log('预览产品：', record);
  };

  const handleDelete = (record: any) => {
    console.log('删除产品：', record);
  };

  const pageOnChange = (current:any, pageSize:any) => {
    searchFunction({...form.getFieldsValue() ,current, size:pageSize, })
  }

  return (
    <div style={{ padding: 24, background: '#f5f6f9', minHeight: '100vh' }}>
      <Card
        style={{
          margin: '16px',
          borderRadius: 12,
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
          height: 'calc(100vh - 120px)', // 精确高度，保证内部滚动
          overflowY: 'auto', // 内部滚动
          padding: '24px',
        }}
      >
        <div style={{ padding: 20, backgroundColor: '#f8f9fa', boxSizing: 'border-box' }}>
          <div
            style={{
              backgroundColor: '#fff',
              padding: 20,
              borderRadius: 8,
              boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
            }}
          >
            {/* 搜索区域 */}
            <Form
              form={form}
              layout="inline"
              onFinish={handleSearch}
              // initialValues={{ status: '全部' }}
              style={{ marginBottom: 16 }}
            >
              <Form.Item name="productName" label="产品名称">
                <Input allowClear placeholder="产品名称" />
              </Form.Item>
              <Form.Item name="status" label="状态">
                <Select allowClear style={{ width: 120 }}>
                  {
                    Object.keys(statusEnum).map(item => <Select.Option value={item}>{statusEnum[item]}</Select.Option>)
                  }
                </Select>
              </Form.Item>
              <Form.Item name="industry" label="所属行业">
                <Select allowClear placeholder="请选择所属行业" style={{ width: 150 }}>
                  <Select.Option value="制造业">制造业</Select.Option>
                  <Select.Option value="服务业">服务业</Select.Option>
                  <Select.Option value="金融业">金融业</Select.Option>
                  <Select.Option value="医疗健康">医疗健康</Select.Option>
                  <Select.Option value="教育行业">教育行业</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item>
                <Space>
                  <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                    查询
                  </Button>
                  <Button htmlType="button" onClick={handleReset}>
                    重置
                  </Button>
                </Space>
              </Form.Item>
            </Form>

            <Divider />

            {/* 操作区 */}
            {/* <Space style={{ marginBottom: 16 }}>
          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
            新增
          </Button>
          <Button icon={<MessageOutlined />} onClick={handleFeedback}>
            问题反馈
          </Button>
        </Space> */}

            {/* 产品列表 */}
            {productData.map((item) => (
              <Card key={item.id} style={{ marginBottom: 16 }}>
                <Row gutter={16} align="middle">
                  {/* 左侧图片 */}
                  <Col flex="120px">
                    <img
                      src="/images/backgroundbig.png"
                      alt="产品图片"
                      style={{
                        width: '120px',
                        height: '80px',
                        objectFit: 'cover',
                        borderRadius: 4,
                      }}
                    />
                  </Col>

                  {/* 中间信息 */}
                  <Col flex="auto">
                    <Space direction="vertical" size={4}>
                      <Space>
                        <Title level={5} style={{ margin: 0 }}>
                          {item.productName}
                        </Title>
                        <Tag color="blue">{(statusEnum as any)[item.status]}</Tag>
                      </Space>
                      <Text type="secondary">购买方式: {item.purchaseWay}</Text>
                      <Text type="secondary">部署架构: {item.deploymentArchitecture}</Text>
                      <Text type="secondary">简介: {item.productEvaluation}</Text>
                    </Space>
                  </Col>

                  {/* 右侧操作 */}
                  <Col flex="200px" style={{ textAlign: 'right' }}>
                    <Space direction="vertical">
                      <Space>
                        <Button size="small" onClick={() => handlePreview(item)}>
                          预览
                        </Button>
                        <Popconfirm title="是否删除" onConfirm={() => handleDelete(item)}>
                          <Button
                          size="small"
                        >
                          删除
                        </Button>
                        </Popconfirm>
                        
                      </Space>
                    </Space>
                  </Col>
                </Row>
              </Card>
            ))}

            {/* 分页 */}
            <div style={{ textAlign: 'center', marginTop: 16 }}>
              <Pagination
                onChange={pageOnChange}
                total={pagination.total}
                pageSize={pagination.pageSize}
                showTotal={(total) => `共 ${total} 条`}
                showSizeChanger
                defaultCurrent={pagination.current}
              />
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default ProductListPage;
